import React, { memo } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import {VideoCameraOutlined,CloudDownloadOutlined ,EnvironmentOutlined,ClockCircleOutlined,PlayCircleOutlined,AlignLeftOutlined } from '@ant-design/icons';
import LeftWrapper from "./style";
import { useSelector } from "react-redux";

const index = memo(() => {
  const navigate = useNavigate();
  const {theme} = useSelector((state)=>{
    return {
      theme:state.theme.theme
    }
  })
  // const goToRoute = (path)=>{
  //   navigate(path)
  // }
  return (
    <LeftWrapper>
      {
        theme?<div className="sprite" />:<div className="sprite2" />
      }
      <div className="btns">
        <ul>
          <li>在线音乐</li>
          <li>
            <NavLink  activeclassname="active" to="/hall">
            <PlayCircleOutlined  className="icon"/>音乐馆</NavLink>
          </li>
          <li>
          <NavLink  activeclassname="active" to="/video">
          <VideoCameraOutlined className="icon" />
            视频</NavLink>

          </li>
          <li>
          <NavLink  activeclassname="active" to="/radio">
          <EnvironmentOutlined className="icon" />电台</NavLink>
          </li>
        </ul>
        <ul>
          <li>我的音乐</li>
          <li>
            <NavLink  activeclassname="active" to="/hall2"><CloudDownloadOutlined  className="icon" />本地和下载</NavLink>
          </li>
          <li>
          <NavLink  activeclassname="active" to="/RecentPlays"><ClockCircleOutlined  className="icon" />最近播放</NavLink>

          </li>
          <li>
          <NavLink  activeclassname="active" to="/ra3dio">
          <AlignLeftOutlined  className="icon" />试听列表</NavLink>
          </li>
        </ul>
      </div>
    </LeftWrapper>
  );
});

export default index;
